/**
 * 纯蒙版可视化器
 * 用于调试和展示纯蒙版效果的可视化组件
 */

import type { DetectionArea } from '../../types'
import type { PureMaskConfig } from './PureMaskEngine'

export interface PureMaskVisualizerStyle {
  /** 蒙版区域颜色 */
  maskColor: string
  /** 蒙版区域透明度 */
  maskAlpha: number
  /** 边框颜色 */
  borderColor: string
  /** 边框宽度 */
  borderWidth: number
  /** 是否显示标签 */
  showLabels: boolean
  /** 标签字体大小 */
  labelFontSize: number
  /** 标签颜色 */
  labelColor: string
}

export class PureMaskVisualizer {
  private ctx: CanvasRenderingContext2D
  private config: PureMaskConfig
  private style: PureMaskVisualizerStyle = {
    maskColor: '#00ff00', // 绿色表示蒙版区域
    maskAlpha: 0.2,
    borderColor: '#00ff00',
    borderWidth: 2,
    showLabels: true,
    labelFontSize: 12,
    labelColor: '#00ff00'
  }

  constructor(
    ctx: CanvasRenderingContext2D, 
    config: PureMaskConfig, 
    style?: Partial<PureMaskVisualizerStyle>
  ) {
    this.ctx = ctx
    this.config = config
    if (style) {
      this.updateStyle(style)
    }
  }

  /**
   * 更新可视化样式
   */
  updateStyle(style: Partial<PureMaskVisualizerStyle>): void {
    this.style = { ...this.style, ...style }
  }

  /**
   * 更新配置
   */
  updateConfig(config: PureMaskConfig): void {
    this.config = config
  }

  /**
   * 渲染调试覆盖层
   */
  renderDebugOverlay(areas: DetectionArea[], _canvasWidth: number, _canvasHeight: number): void {
    if (!this.config.enabled || areas.length === 0) {
      return
    }

    // 保存当前绘图状态
    this.ctx.save()

    areas.forEach((area, index) => {
      this.renderMaskArea(area, index)
    })

    // 恢复绘图状态
    this.ctx.restore()
  }

  /**
   * 渲染单个蒙版区域
   */
  private renderMaskArea(area: DetectionArea, index: number): void {
    const width = area.right - area.left
    const height = area.bottom - area.top

    // 渲染蒙版区域填充
    this.ctx.fillStyle = this.style.maskColor
    this.ctx.globalAlpha = this.style.maskAlpha
    this.ctx.fillRect(area.left, area.top, width, height)

    // 渲染边框
    this.ctx.globalAlpha = 1.0
    this.ctx.strokeStyle = this.style.borderColor
    this.ctx.lineWidth = this.style.borderWidth
    this.ctx.strokeRect(area.left, area.top, width, height)

    // 渲染标签
    if (this.style.showLabels) {
      this.renderLabel(area, index)
    }

    // 渲染蒙版信息
    this.renderMaskInfo(area)
  }

  /**
   * 渲染标签
   */
  private renderLabel(area: DetectionArea, index: number): void {
    this.ctx.fillStyle = this.style.labelColor
    this.ctx.font = `${this.style.labelFontSize}px sans-serif`
    
    const label = `蒙版区域 ${index + 1}`
    const labelX = area.left + 5
    const labelY = area.top + this.style.labelFontSize + 5
    
    // 绘制标签背景
    const labelWidth = this.ctx.measureText(label).width
    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'
    this.ctx.fillRect(labelX - 2, labelY - this.style.labelFontSize - 2, labelWidth + 4, this.style.labelFontSize + 4)
    
    // 绘制标签文字
    this.ctx.fillStyle = this.style.labelColor
    this.ctx.fillText(label, labelX, labelY)
  }

  /**
   * 渲染蒙版信息
   */
  private renderMaskInfo(area: DetectionArea): void {
    const centerX = (area.left + area.right) / 2
    const centerY = (area.top + area.bottom) / 2
    
    // 绘制中心点
    this.ctx.fillStyle = this.style.borderColor
    this.ctx.beginPath()
    this.ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI)
    this.ctx.fill()
    
    // 绘制透明度信息
    const opacityText = `透明度: ${(this.config.maskOpacity * 100).toFixed(0)}%`
    this.ctx.fillStyle = this.style.labelColor
    this.ctx.font = `${this.style.labelFontSize - 2}px sans-serif`
    
    const textWidth = this.ctx.measureText(opacityText).width
    const textX = centerX - textWidth / 2
    const textY = centerY + 20
    
    // 绘制文字背景
    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'
    this.ctx.fillRect(textX - 2, textY - this.style.labelFontSize + 2, textWidth + 4, this.style.labelFontSize)
    
    // 绘制文字
    this.ctx.fillStyle = this.style.labelColor
    this.ctx.fillText(opacityText, textX, textY)
  }

  /**
   * 渲染网格（用于调试定位）
   */
  renderGrid(canvasWidth: number, canvasHeight: number, gridSize: number = 50): void {
    this.ctx.save()
    
    this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'
    this.ctx.lineWidth = 1
    
    // 绘制垂直线
    for (let x = 0; x <= canvasWidth; x += gridSize) {
      this.ctx.beginPath()
      this.ctx.moveTo(x, 0)
      this.ctx.lineTo(x, canvasHeight)
      this.ctx.stroke()
    }
    
    // 绘制水平线
    for (let y = 0; y <= canvasHeight; y += gridSize) {
      this.ctx.beginPath()
      this.ctx.moveTo(0, y)
      this.ctx.lineTo(canvasWidth, y)
      this.ctx.stroke()
    }
    
    this.ctx.restore()
  }

  /**
   * 清除调试信息
   */
  clear(): void {
    // 可视化器本身不负责清除画布，这由主渲染器处理
  }
}
